<template>
  <div>
    <!-- 容器 -->
    <div class="container">
      <!-- 操作区域 -->
      <div class="handle-box">
        <!-- 导出Excel按钮 -->
        <el-button type="primary" @click="exportXlsx">导出Excel</el-button>
      </div>
      <!-- 数据表格 -->
      <el-table :data="tableData" border class="table" header-cell-class-name="table-header">
        <!-- ID列 -->
        <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
        <!-- 姓名列 -->
        <el-table-column prop="name" label="姓名"></el-table-column>
        <!-- 学号列 -->
        <el-table-column prop="sno" label="学号"></el-table-column>
        <!-- 班级列 -->
        <el-table-column prop="class" label="班级"></el-table-column>
        <!-- 年龄列 -->
        <el-table-column prop="age" label="年龄"></el-table-column>
        <!-- 性别列 -->
        <el-table-column prop="sex" label="性别"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts" name="export">
// 导入 Vue 的响应式引用
import { ref } from 'vue';
// 导入 XLSX 库用于生成 Excel 文件
import * as XLSX from 'xlsx';

// 定义表格数据项的接口
interface TableItem {
  id: number;
  name: string;
  sno: string;
  class: string;
  age: string;
  sex: string;
}

// 创建响应式的表格数据引用
const tableData = ref<TableItem[]>([]);

// 获取表格数据
const getData = () => {
  tableData.value = [
    {
      id: 1,
      name: '小明',
      sno: 'S001',
      class: '一班',
      age: '10',
      sex: '男',
    },
    {
      id: 2,
      name: '小红',
      sno: 'S002',
      class: '一班',
      age: '9',
      sex: '女',
    },
  ];
};
getData();

// 初始化导出数据列表，包含表头
const list = [['序号', '姓名', '学号', '班级', '年龄', '性别']];

// 导出Excel文件的函数
const exportXlsx = () => {
  // 遍历表格数据，将每行数据转换为数组格式并添加到导出列表中
  tableData.value.map((item: TableItem, i: number) => {
    // 创建每行数据的数组，第一个元素是序号（索引+1）
    const arr: any[] = [i + 1];
    // 将其他字段数据添加到数组中
    arr.push(...[item.name, item.sno, item.class, item.age, item.sex]);
    // 将当前行数据添加到导出列表中
    list.push(arr);
  });
  
  // 使用 XLSX 库将数组数据转换为工作表
  let WorkSheet = XLSX.utils.aoa_to_sheet(list);
  // 创建新的工作簿
  let new_workbook = XLSX.utils.book_new();
  // 将工作表添加到工作簿中，工作表名称为"第一页"
  XLSX.utils.book_append_sheet(new_workbook, WorkSheet, '第一页');
  // 写入文件并下载，文件名为"表格.xlsx"
  XLSX.writeFile(new_workbook, `表格.xlsx`);
};
</script>

<style scoped>
/* 操作区域样式 */
.handle-box {
  margin-bottom: 20px;
}

/* 选择器样式 */
.handle-select {
  width: 120px;
}

/* 输入框样式 */
.handle-input {
  width: 300px;
}

/* 表格样式 */
.table {
  width: 100%;
  font-size: 14px;
}

/* 红色文本样式 */
.red {
  color: #f56c6c;
}

/* 表格单元格缩略图样式 */
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>